<!-- src/App.vue -->
<template>
  <v-app>
    <!-- 顶部导航栏 -->
    <v-app-bar app color="primary" dark>
      <v-app-bar-nav-icon @click="drawer = !drawer"></v-app-bar-nav-icon>
      <v-toolbar-title>视频后台管理</v-toolbar-title>
      <v-spacer></v-spacer>
      <v-btn icon>
        <v-icon>mdi-account-circle</v-icon>
      </v-btn>
    </v-app-bar>

    <!-- 侧边栏 -->
    <v-navigation-drawer v-model="drawer" app>
      <v-list>
        <v-list-item
          v-for="item in menuItems"
          :key="item.title"
          :to="item.path"
          link
        >
          <template v-slot:prepend>
            <v-icon>{{ item.icon }}</v-icon>
          </template>
          <v-list-item-title>{{ item.title }}</v-list-item-title>
        </v-list-item>
      </v-list>
    </v-navigation-drawer>

    <!-- 内容区域 -->
    <v-main>
      <v-container fluid>
        <router-view></router-view>
      </v-container>
    </v-main>
  </v-app>
</template>

<script>
export default {
  data() {
    return {
      drawer: true,
      menuItems: [
        { title: '用户管理', path: '/', icon: 'mdi-view-dashboard',},
        { title: '音乐管理', path: '/music', icon: 'mdi-music' },
        { title: '音乐包管理', path: '/package', icon: 'mdi-folder-open' },
        { title: '模板管理', path: '/template', icon: 'mdi-file-document' },
        { title: '音色管理', path: '/voice', icon: 'mdi-music',},
      ],
    }
  },
}
</script>

<style scoped>
.v-main {
  padding: 64px 0 0 256px; /* 适配顶部和侧边栏 */
}
@media (max-width: 960px) {
  .v-main {
    padding: 64px 0 0 0; /* 移动端适配 */
  }
}
</style>